<script setup lang="ts">
import {onMounted, reactive} from 'vue'
import Header from "./components/header/index.vue";
import treeMenu from "./components/treeMenu/treeMenu.vue";
import {Message} from "@arco-design/web-vue";
import {useUsersetting} from '../../store/usersetting.ts'
import moniMenu from "./data.ts"
console.log('send',moniMenu.data.nav);
const Usersetting = useUsersetting();
// const {switch_head_visible, get_head_visible} = Usersetting

function onCollapse(val, type) {
  const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';
  Message.info({
    content,
    duration: 1000,
  });
}

let mavMenuData = reactive({data:[]});

onMounted(() => {

})

</script>

<template>
  <div style="position: relative">
    <div class="root_head">
      <Header></Header>
    </div>
    <a-layout class="page_body">
      <a-layout-sider
          :style="{ height: '100%',overflow: 'auto' }"
          breakpoint="lg">
        <a-menu
            :style="{ width: '100%'}"
            breakpoint="md"
            @collapse="onCollapse"
            :default-open-keys="['0_2']"  
            :default-selected-keys="['0_2']" 
        >
          <treeMenu v-if=" 'nav'in moniMenu.data" :children="moniMenu.data.nav"></treeMenu>
        </a-menu>
      </a-layout-sider>
      <a-layout-content class="conten">
        <router-view name="content"></router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<style scoped lang="scss">

.conten {
  box-sizing: border-box;
  background: #f0f2f4;
  overflow-y: auto;
}

.root_head {
  width: 100%;
  height: 60px;
  //box-shadow: 0 5px 5px rgba(0, 0, 0, 1);
  border-bottom: 1px solid #e8e8e8;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

.page_body {
  height: calc(100vh - 62px);
}
</style>